<template>
  <div class="app-container">
    <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
      @reset-click="handleResetClick" />
    <PageContent ref="contentRef" :gridOptions="gridOptions" :content-config="contentConfig" @addClick="handleAddClick"
       @export-click="handleExportClick" @toolbarClick="handleToolbarClick"
      >
      <template #status="scope">
        <el-tag :type="statusList[scope.row[scope.prop]]?.type|| ''">
          {{ statusList[scope.row[scope.prop]]?.text || scope.row[scope.prop] }}
        </el-tag>
      </template>
      <!-- <template #type="scope">
        <el-tag :type="typeList[scope.row[scope.prop]].type">
          {{ $t(typeList[scope.row[scope.prop]].text) }}
        </el-tag>
      </template> -->
      <template #result_type="scope">
        <el-tag v-if="scope.row[scope.prop]" :type="resultTypeList[scope.row[scope.prop]]?.type|| ''">
          {{ resultTypeList[scope.row[scope.prop]]?.text }}
        </el-tag>
      </template>

    </PageContent>
  </div>
</template>

<script setup>
import searchConfig from "./config/search";
import contentConfig from "./config/content";
import { tableHeightAutoAdjust } from '@/utils/common'
import usePage from "@/hooks/usePage";
defineOptions({
  name: "financeBetOn",
  inheritAttrs: false,
});
const { t } = useI18n();
const gridOptions = reactive({})
const { searchRef, contentRef,
  handleQueryClick, handleResetClick, handleAddClick,
  handleExportClick, } = usePage();
const statusList = {
  // 0: { text: t("status.36"), type: "primary" },
  'pending': { text: t("status.29"), type: "primary" },
  'settled': { text: t("status.37"), type: "success" },
  'canceled': { text: t("status.30"), type: "danger" },
  'refunded': { text: t("status.38"), type: "danger" },
}
const resultTypeList = {
  'won': { text: t("status.35"), type: "success" },
  'lost': { text: t("status.34"), type: "danger" },
  'draw': { text: t("status.33"), type: "primary" }
}
onMounted(() => {
  // 确保在组件挂载后立即设置高度
  tableHeightAutoAdjust(gridOptions);
});
</script>